html,
body {
  width: 100%;
  height: 100%;
}
.app-wid-full {
  width: 100%;
}
.app-hig-full {
  height: 100%;
}
.app-v-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.app-h-center {
  display: flex;
  justify-content: center;
  text-align: center;
}
.app-padding-none {
  padding: none;
}
.app-padding-1em {
  padding: 1em;
}
.app-padding-lr-1em {
  padding-left: 1em;
  padding-right: 1em;
}
.app-margin-1em {
  margin: 1em;
}
.app-margin-lr-1em {
  margin-left: 1em;
  margin-right: 1em;
}
.app-margin-t-1em {
  margin-top: 1em;
}
.app-margin-b-1em {
  margin-bottom: 1em;
}
.mdui-color-blue {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #2196f3 !important;
}
.mdui-color-blue-50 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #e3f2fd !important;
}
.mdui-color-blue-100 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #bbdefb !important;
}
.mdui-color-blue-200 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #90caf9 !important;
}
.mdui-color-blue-300 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #64b5f6 !important;
}
.mdui-color-blue-400 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #42a5f5 !important;
}
.mdui-color-blue-500 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #2196f3 !important;
}
.mdui-color-blue-600 {
  color: #fff !important;
  background-color: #1e88e5 !important;
}
.mdui-color-blue-700 {
  color: #fff !important;
  background-color: #1976d2 !important;
}
.mdui-color-blue-800 {
  color: #fff !important;
  background-color: #1565c0 !important;
}
.mdui-color-blue-900 {
  color: #fff !important;
  background-color: #0d47a1 !important;
}
.mdui-color-blue-accent {
  color: #fff !important;
  background-color: #448aff !important;
}
.mdui-color-blue-a100 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #82b1ff !important;
}
.mdui-color-blue-a200 {
  color: #fff !important;
  background-color: #448aff !important;
}
.mdui-color-blue-a400 {
  color: #fff !important;
  background-color: #2979ff !important;
}
.mdui-color-blue-a700 {
  color: #fff !important;
  background-color: #2962ff !important;
}
.mdui-color-light-blue-accent {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #40c4ff !important;
}
.mdui-color-light-blue-a100 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #80d8ff !important;
}
.mdui-color-light-blue-a200 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #40c4ff !important;
}
.mdui-color-light-blue-a400 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #00b0ff !important;
}
.mdui-color-light-blue-a700 {
  color: #fff !important;
  background-color: #0091ea !important;
}
.mdui-color-red-accent {
  color: #fff !important;
  background-color: #ff5252 !important;
}
.mdui-color-red-a100 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #ff8a80 !important;
}
.mdui-color-red-a200 {
  color: #fff !important;
  background-color: #ff5252 !important;
}
.mdui-color-red-a400 {
  color: #fff !important;
  background-color: #ff1744 !important;
}
.mdui-color-red-a700 {
  color: #fff !important;
  background-color: #d50000 !important;
}
.mdui-color-yellow-accent {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #ff0 !important;
}
.mdui-color-yellow-a100 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #ffff8d !important;
}
.mdui-color-yellow-a200 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #ff0 !important;
}
.mdui-color-yellow-a400 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #ffea00 !important;
}
.mdui-color-yellow-a700 {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #ffd600 !important;
}
/**
 * .mdui-color-black
 * .mdui-color-white
 * .mdui-color-transparent
 */
.mdui-color-black {
  color: #fff !important;
  background-color: #000 !important;
}
.mdui-color-white {
  color: rgba(0, 0, 0, 0.87) !important;
  background-color: #fff !important;
}
.mdui-color-transparent {
  background-color: transparent !important;
}
/**
 * .mdui-theme-primary-[color] .mdui-text-color-theme
 * .mdui-theme-primary-[color] .mdui-text-color-theme-[degree]
 */
.mdui-theme-primary-blue .mdui-text-color-theme {
  color: #2196f3 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-50 {
  color: #e3f2fd !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-100 {
  color: #bbdefb !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-200 {
  color: #90caf9 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-300 {
  color: #64b5f6 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-400 {
  color: #42a5f5 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-500 {
  color: #2196f3 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-600 {
  color: #1e88e5 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-700 {
  color: #1976d2 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-800 {
  color: #1565c0 !important;
}
.mdui-theme-primary-blue .mdui-text-color-theme-900 {
  color: #0d47a1 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme {
  color: #03a9f4 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-50 {
  color: #e1f5fe !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-100 {
  color: #b3e5fc !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-200 {
  color: #81d4fa !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-300 {
  color: #4fc3f7 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-400 {
  color: #29b6f6 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-500 {
  color: #03a9f4 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-600 {
  color: #039be5 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-700 {
  color: #0288d1 !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-800 {
  color: #0277bd !important;
}
.mdui-theme-primary-light-blue .mdui-text-color-theme-900 {
  color: #01579b !important;
}
.mdui-theme-accent-blue .mdui-text-color-theme-accent {
  color: #448aff !important;
}
.mdui-theme-accent-blue .mdui-text-color-theme-a100 {
  color: #82b1ff !important;
}
.mdui-theme-accent-blue .mdui-text-color-theme-a200 {
  color: #448aff !important;
}
.mdui-theme-accent-blue .mdui-text-color-theme-a400 {
  color: #2979ff !important;
}
.mdui-theme-accent-blue .mdui-text-color-theme-a700 {
  color: #2962ff !important;
}
.mdui-text-color-blue {
  color: #2196f3 !important;
}
.mdui-text-color-blue-50 {
  color: #e3f2fd !important;
}
.mdui-text-color-blue-100 {
  color: #bbdefb !important;
}
.mdui-text-color-blue-200 {
  color: #90caf9 !important;
}
.mdui-text-color-blue-300 {
  color: #64b5f6 !important;
}
.mdui-text-color-blue-400 {
  color: #42a5f5 !important;
}
.mdui-text-color-blue-500 {
  color: #2196f3 !important;
}
.mdui-text-color-blue-600 {
  color: #1e88e5 !important;
}
.mdui-text-color-blue-700 {
  color: #1976d2 !important;
}
.mdui-text-color-blue-800 {
  color: #1565c0 !important;
}
.mdui-text-color-blue-900 {
  color: #0d47a1 !important;
}
.mdui-text-color-blue-accent {
  color: #448aff !important;
}
.mdui-text-color-blue-a100 {
  color: #82b1ff !important;
}
.mdui-text-color-blue-a200 {
  color: #448aff !important;
}
.mdui-text-color-blue-a400 {
  color: #2979ff !important;
}
.mdui-text-color-blue-a700 {
  color: #2962ff !important;
}
/**
 * .mdui-text-color-black
 * .mdui-text-color-black-[]
 * .mdui-text-color-theme-[]
 */
.mdui-text-color-black {
  color: #000 !important;
}
.mdui-text-color-black-text,
.mdui-text-color-theme-text {
  color: rgba(0, 0, 0, 0.87) !important;
}
.mdui-text-color-black-secondary,
.mdui-text-color-theme-secondary {
  color: rgba(0, 0, 0, 0.54) !important;
}
.mdui-text-color-black-disabled,
.mdui-text-color-theme-disabled {
  color: rgba(0, 0, 0, 0.38) !important;
}
.mdui-text-color-black-divider,
.mdui-text-color-theme-divider {
  color: rgba(0, 0, 0, 0.12) !important;
}
.mdui-text-color-black-icon,
.mdui-text-color-theme-icon {
  color: rgba(0, 0, 0, 0.54) !important;
}
.mdui-text-color-black-icon-disabled,
.mdui-text-color-theme-icon-disabled {
  color: rgba(0, 0, 0, 0.26) !important;
}
/**
 * .mdui-text-color-white
 * .mdui-text-color-white-[]
 */
.mdui-text-color-white {
  color: #fff !important;
}
.mdui-text-color-white-text {
  color: #fff !important;
}
.mdui-text-color-white-secondary {
  color: rgba(255, 255, 255, 0.7) !important;
}
.mdui-text-color-white-disabled {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mdui-text-color-white-divider {
  color: rgba(255, 255, 255, 0.12) !important;
}
.mdui-text-color-white-icon {
  color: #fff !important;
}
.mdui-text-color-white-icon-disabled {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* app */
.wrap {
  height: inherit;
}
.appbar {
  height: 48px;
}
.app-color-dark-gray {
  background-color: #cbcbcb;
}
.title {
  /* color: #fff; */
  font-family: SimHei, 'Microsoft Yahei';
  font-size: 17.5pt;
  font-weight: 700;
  padding-left: 24px;
  display: inline-block;
  padding-top: 10px;
}
.actions {
  float: right;
  padding-top: 8px;
  padding-right: 8px;
}

.drawer {
  background: white;
  width: 128px;
  position: fixed;
  right: 0;
  margin: 4px;
  text-align: center;
}

.control-icons {
  width: 64px;
  position: absolute;
  left: 0;
  top: 48px;
  bottom: 0;
}

.control-item {
  margin: 8px;
  width: 48px;
}

.label-wrap {
  width: 600px;
  height: 400px;
  margin-top: 8px;
  margin-left: 72px;
  border: 1px dashed;
  background:#ddd;
  float: left;
}
.label-wrap form {
  width: inherit;
  height: inherit;
  position: relative;
}
.label-wrap input {
  border: none;
}
.label-item:focus {
  border: none;
  background-color: #0091ea;
}
.label-barcode {
  background-image: url('../images/barcode.png');
  background-color: #fff;
  background-repeat: no-repeat;
}
.label-image {
  background-image: url('../images/image.png');
  background-color: #fff;
  background-repeat: no-repeat;
}
.label-qrcode {
  background-image: url('../images/qrcode.png');
  background-color: #fff;
  background-repeat: no-repeat;
}
.label-line {
  background-color: #000;
}

.properties {
  width: 275px;
  float: right;
  border: 1px solid;
  border-radius: 4px;
  padding: 0 16px;
  margin: 8px;
  font-size: 14px;
}
.properties table {
  margin-top: 8px;
  width: 100%;
}
.properties td {
  padding: 0 0 0 8px;
}
.properties input, select {
  border: none;
  width: 100%;
  height: 32px;
  padding: 0;
  border-radius: 0;
} 
